<template>
  <el-button type="primary" size="small" @click="openDialog">新建</el-button>
  <general-table
    :columns="columns"
    :tableData="tableData"
    :tableAttr="tableAttr"
  >
    <template #date="{ scope: { row } }">
      <el-icon><timer /></el-icon>
      {{  row.date }}
    </template>
    <template #operate="slotData">
      <el-button type="primary" size="small" @click="openDialog">add</el-button>
      <el-popover
        effect="light"
        trigger="hover"
        placement="top"
        width="auto"
        content="popover"
        :teleported="false"
      >
        <template #reference>
          <!-- 虽然设置了popover的触发方式是hover，但是点击会触发行点击事件，所以加个阻止冒泡 -->
          <el-button plain size="small" @click.stop="" @mouseenter="handleDelete(slotData.scope.$index)">Edit</el-button>
        </template>
      </el-popover>
      &nbsp;

      <!-- 设置:teleported="false"后，popconfirm将插入在el-table相应的位置，此时就可以用css控制popconfirm一直在delete按钮旁边，
        但是会出现el-table的层级太高，遮挡popconfirm的情况，设置css来改变不好控，需动态设置：
        1、先设置表格的每一行的z-index: 0
        2、点击哪一行的delete，就把这行的z-index: 2022，其他为z-index: 0，此时当前点击popconfirm就能显示在最上层
        3、当页面中使用了dialog组件，点击完delete，再打开dialog，就会出现刚点击完的那一行的层级高于dialog，会显示在dialog上方，解决：
          3-1、如果dialog是通过table的操作列打开的，给table设置rowclick属性，点击表格行的时候，将表格行的z-index: 0，切记：绑在
            delete上的事件要阻止冒泡，不然会触发rowclick，那么当前点击行的z-index又变成了0，就不会显示popconfirm了
          3-2、如果dialog是在页面的其他位置，那就在点击打开dialog的事件上调用一下rowclick即可
      -->
      <el-popconfirm  
        :teleported="false"     
        title="Are you sure to delete this?"
      >
        <template #reference>
          <el-button size="small" @click.stop="handleDelete(slotData.scope.$index)">Delete</el-button>
        </template>
      </el-popconfirm>
    </template>
  </general-table>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// import { Timer } from '@element-plus/icons-vue'    // 局部引入icon
import GeneralTable from '@/components/GeneralTable.vue'
import { ref } from 'vue'

const columns = [
  { label: 'date', slot: 'date'},
  { label: 'name', prop: 'name'},
  { label: 'address', prop: 'address'},
  { label: '操作', slot: 'operate'},
]

const tableAttr = {
  rowstyle: () => {
    return {
      position: 'relative',
      zIndex: 0
    }
  },
  rowclick: () => {
    let listDom: any = document.querySelectorAll('.el-table__row')
    listDom.forEach((item: any) => {
      item.style.zIndex = 0
    })
  }
}

let dialogVisible = ref(false)
const openDialog = () => {
  tableAttr.rowclick()      // 设置表格行z-index: 0
  dialogVisible.value = true
}

const handleDelete = (index: any) => {
  let listDom: any = document.querySelectorAll('.el-table__row')
  listDom.forEach((item: any) => {
    item.style.zIndex = 0
  })
  // 通过index来获取当前点击的是哪一个el-table-row
  listDom[index].style['z-index'] = 2022
}

interface User {
  date: string
  name: string
  address: string
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
